<template>
  <!-- <Demo @plant="handlePlant" msg="上学" text="attr">
    <template v-slot:school>
      <span>school</span>
    </template>
</Demo> -->
  <!-- <WatchDemo> </WatchDemo> -->
  <!-- <WatchEffectDemo></WatchEffectDemo> -->
  <!-- <button @click="isShow = !isShow">点我切换显示和隐藏</button>
  <Count v-if="isShow"></Count>
  <hr>
  <LifeCircle v-if="isShow"></LifeCircle> -->
  <!-- <RefDemo></RefDemo> -->
  <!-- <ShallowReactiveShallowRef></ShallowReactiveShallowRef> -->
  <!-- <ReadonlyDemo></ReadonlyDemo> -->
  <!-- <ToRawMarkRawDemo></ToRawMarkRawDemo> -->
  <!-- <MyRefDemo></MyRefDemo> -->
  <!-- <ThrottledDemo></ThrottledDemo> -->
  <BigBlock> </BigBlock>
</template>

<script>
import { ref, reactive } from 'vue'
import Demo from './components/Demo.vue'
import WatchDemo from './components/WatchDemo.vue'
import WatchEffectDemo from './components/WatchEffectDemo.vue'
import LifeCircle from './components/LifeCircle.vue'
import Count from './components/Count.vue'
import RefDemo from './components/RefDemo.vue'
import ShallowReactiveShallowRef from './components/ShallowReactiveShallowRef'
import ReadonlyDemo from './components/ReadonlyDemo'
import ToRawMarkRawDemo from './components/ToRawMarkRawDemo'
import MyRefDemo from './components/MyRefDemo'
import ThrottledDemo from './components/ThrottledDemo'
import BigBlock from './components/block/BigBlock'

export default {
  name: "App",
  components: {
    Demo, WatchDemo, WatchEffectDemo, LifeCircle, Count, RefDemo, ShallowReactiveShallowRef, ReadonlyDemo,
    ToRawMarkRawDemo, MyRefDemo, ThrottledDemo, BigBlock
  },
  setup() {
    let isShow = ref(true)
    return {
      isShow
    }

  },
};
</script>

<style></style>
